<template>
  <div class="app-container search-list">
    <table-pagination
        style="position: relative;z-index: 9"
        ref="el-search-table"
        :fetch="getData"
        type="remote"
        :adaptive="fixOption"
        :page-sizes="[20, 50, 100]"
        :columns="columns"
        :form-options="formOptions"
        list-field="records"
        total-field="totalElements"
        page-index-key="page"
        page-size-key="pageSize"
        height="300"
        method="get"
        @selection-change="handleSelectionChange">
      <template slot="button">
        <el-button type="primary" size="mini" @click="handleToAdd()">新增页面</el-button>
        <el-button type="danger" size="mini" @click="handleBatchDeletion()" v-if="selectedIdList.length>0">批量删除</el-button>
      </template>
      <el-table-column slot="append" label="操作" width="400" fixed="right">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button plain size="mini" type="primary" @click="preview(scope.row)">预览</el-button>
        </template>
      </el-table-column>
    </table-pagination>
  </div>
</template>

<script>
import TablePagination from '_c/Tables/table-pagination';
import {getCusPage, delCusPage} from '@/api/custom';
import {mapGetters} from 'vuex';
import {utcFormat} from '@/utils/filters';

export default {
    name: 'custom-page-list',
    components: {TablePagination},
    data () {
        return {
            fixOption: {fixedHeader: true},
            pageParams: {
                page: 1,
                pageSize: 20
            },
            formOptions: {
                showResetBtn: true,
                showSearchBtn: true,
                inline: false,
                labelWidth: 120,
                size: 'small',
                forms: []
            },
            columns: [
                {label: '', type: 'selection'},
                {label: '标题', prop: 'title'},
                {label: '上次修改时间',
                    prop: 'updateDate',
                    render: row => {
                        return utcFormat(row.updateDate, 'YYYY-MM-DD HH:mm:ss', this.timeZone);
                    }
                }
            ],
            selectedList: [],
            selectedIdList: [],
            submitLoading: false,
            dialogVisible: false
        };
    },
    computed: {
        ...mapGetters(['siteList', 'timeZone']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        }
    },
    methods: {
        getData (params) {
            return new Promise((resolve, reject) => {
                this.pageParams.pageSize = params.pageSize;
                let parameters = {
                    page: params.page,
                    siteId: this.siteId,
                    pageSize: params.pageSize

                };
                getCusPage(parameters).then((res) => {
                    if (res.records == null || res.records.length === 0) {
                        resolve(res);
                        return false;
                    }
                    resolve(res);
                });
            });
        },
        handleBatchDeletion () {
            const h = this.$createElement;
            this.$msgbox({
                title: '确定删除吗?',
                message: h('p', null, [
                    h('span', null, '删除后将不能找回,请慎重操作 ')
                ]),
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        delCusPage({siteId: this.siteId, pageIds: this.selectedIdList}).then(res => {
                            if (res.code === '200') {
                                this.$refs['el-search-table'].searchHandler(true);
                                instance.confirmButtonLoading = false;
                                done();
                                this.$message({
                                    type: 'info',
                                    message: res.message
                                });
                            } else {
                                this.$message({type: 'error', message: '删除出错'});
                            }
                        }).catch(() => {
                            instance.confirmButtonLoading = false;
                            done();
                        });
                    } else {
                        instance.confirmButtonLoading = false;
                        done();
                    }
                }
            });
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        handleToAdd () {
            this.$router.push({name: 'custom-page-add'});
        },
        handleSelectionChange (records) {
            if (records && records.length > 0) {
                let tempIdList = [];
                records.forEach(item => {
                    tempIdList.push(item.id);
                });
                this.selectedIdList = tempIdList;
                this.selectedList = records;
            } else {
                this.selectedIdList = [];
                this.selectedList = [];
            }
        },
        handleEdit (id) {
            this.$router.push({name: 'custom-page-edit', params: {id}});
        },
        preview (row) {
            window.open('https://' + this.siteInfo.domainName + '/system-auto-page/' + row.id, '_blank');
        }
    }
};
</script>

<style scoped lang="scss">
.search-list {
  h4 {
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}
</style>

<style lang="scss">
.good-setting-panel {
  .el-tabs--border-card {
    box-shadow: none;
  }
}
</style>
